<template>
  <div class="Recommend_Songs_List">
    <div class="top">
      <!-- 每日歌曲推荐 -->
      <div class="li">
        <el-card shadow="hover">
          <span>星期三</span>
          <span>30</span>
        </el-card>
        <div class="name">
          <h2>每日歌曲推荐</h2>
          <p><i class="el-icon-cherry"></i>根据你的音乐口味生成，每天6：00更新</p>
        </div>
      </div>
      <!-- <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
      </el-table> -->
    </div>
    <div class="table">暂无接口，敬请期待!</div>
  </div>
</template>

<script>
import { getRecommendSongsList } from '../../../network/playlist.js'
export default {
  data () {
    return {
      RecommendSongsList: []
    }
  },
  created () {
    this.getRecommendSongsList()
  },
  methods: {
    getRecommendSongsList () {
      if (window.localStorage.getItem('currentUserInfo')) {
        getRecommendSongsList().then(res => {
          // console.log(res.data)
        }, err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .Recommend_Songs_List {
    width: 82%;
    background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
    .top, .table {
      width: 90%;
      margin: 20px auto 30px;
      .li {
        display: flex;
        flex-direction: row;
        .el-card {
          width: 18%;
          display: flex;
          flex-direction: column;
          height: auto;
          span {
            margin: auto;
            display: flex;
            flex: 1;
            justify-content: center;
          }
          span:last-child {
            font-size: 80px;
            color: #44aaf8;
            font-weight: 700;
          }
        }
        .name {
          display: flex;
          flex-direction: column;
          margin-left: 30px;
          justify-content: center;
          h2 {
            margin-bottom: 30px;
          }
        }
      }
    }
  }
</style>
